<template>
<div class="container">
    <el-form :model="form" status-icon ref="passwordForm" :rules="validateRules">
        <el-form-item label="旧密码" prop="oldPassword">
            <el-input
            v-model="form.oldPassword"
            placeholder="请输入旧密码"
            type="password"
            />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
            placeholder="请再输入一遍密码"
            type="password"
            v-model="form.confirmPassword"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm" style="width: 100%" size="medium">提交</el-button>
        </el-form-item>
    </el-form>
</div>
</template>
<script>
import { api } from "@/api/api.js";
export default {
  data() {
    return {
      form: {
        oldPassword: "",
        password: "",
        confirmPassword: ""
      }
    };
  },
  computed: {
    validateRules() {
      return {
        oldPassword: [
          {
            required: true,
            message: "请输入旧密码"
          }
        ],
        password: [
          {
            validator: (__, value, callback) => {
              if (this.form.password === "") {
                callback(new Error("密码不能为空"));
                return;
              }

              if (this.form.confirmPassword !== "") {
                this.$refs.passwordForm.validateField("confirmPassword");
              }
              callback();
            },
            required: true,
            trigger: "change"
          }
        ],
        confirmPassword: [
          {
            validator: (__, value, callback) => {
              if (value === "") {
                callback(new Error("确认密码不能为空"));
              } else if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            required: true
          }
        ]
      };
    }
  },
  methods: {
    async submitForm() {
      try {
        await this.$refs.passwordForm.validate();
      } catch (e) {
        this.$notify.error({
          title: "错误",
          message: "请检查表单",
          type: "error"
        });
        return;
      }

      try {
        const response = await this.http.post(api.changePassword, {
          username: localStorage.getItem("ms_username"),
          oldPwd: this.form.oldPassword,
          newPwd: this.form.password
        });

        if (response.data.code >= 400) {
          throw new Error(response.data.msg);
        }
        this.$notify({
          title: "提示",
          message: "修改成功",
          type: "success"
        });
        this.$refs.passwordForm.resetFields();
      } catch (e) {
        this.$notify.error({
          title: "错误",
          message: e.message
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 140px 450px;
}
</style>
